<template>
	<div class="teafooter">
		<div @click="act()" :class="{on:showact}"><em></em>活动</div>
		<div @click="rank()" :class="{on:showrank}"><em></em>排名</div>
		<!--<div @click="score()" :class="{on:showscore}"><em></em>积分</div>-->
	</div>
</template>

<script type="text/ecmascript-6">
	export default{
		data(){
			return{
				
			}
		},
		computed:{
			showact(){
				return this.$store.state.tea_act
			},
			showrank(){
				return this.$store.state.tea_rank
			},
			showscore(){
				return this.$store.state.tea_score
			}
		},
		methods:{
			act(){
				this.$router.replace('/tea/active');
				this.$store.commit('showteaact');
				this.$store.commit('hidetearank');
				this.$store.commit('hideteascore');
			},
			rank(){
				this.$router.replace('/tea/rank');
				this.$store.commit('hideteaact');
				this.$store.commit('showtearank');
				this.$store.commit('hideteascore');
			},
			score(){
				this.$router.replace('/tea/tea_integral');
				this.$store.commit('hideteaact');
				this.$store.commit('hidetearank');
				this.$store.commit('showteascore');
			},
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../../assets/scss/_mixin";
	.teafooter {
		width: 100%;
		height: 96px/$ppr;
		position: fixed;
		line-height: 96px/$ppr;
		bottom: 0;
		left: 0;
		z-index:9;
		&:after {
			content: '';
			display: table-cell;
			clear: both;
		}
		>div {
			width: 50%;
			float: left;
			height: 100%;
			background: #4ce156;
			color: #333;
			font-size: 30px/$ppr;
			text-align: center;
			&.on{
				background: #45c84e !important;
				color: #fc4b32 !important;
			}
			&:nth-child(1) {
				em {
					display: inline-block;
					width: 30px/$ppr;
					height: 30px/$ppr;
					background: url(img/ft_act.png);
					background-size: 100%;
					margin-right: 15px/$ppr;
				}
				&.on em{
					background: url(img/ft_act_on.png) !important;
					background-size: 100% !important;
				}
			}
			&:nth-child(2) {
				em {
					display: inline-block;
					width: 34px/$ppr;
					height: 28px/$ppr;
					background: url(img/ft_rank.png);
					background-size: 100%;
					margin-right: 15px/$ppr;
				}
				&.on em{
					background: url(img/ft_rank_on.png) !important;
					background-size: 100% !important;
				}
			}
			&:nth-child(3) {
				em {
					display: inline-block;
					width: 32px/$ppr;
					height: 32px/$ppr;
					background: url(img/ft_score.png);
					background-size: 100%;
					margin-right: 15px/$ppr;
				}
				&.on em{
					background: url(img/ft_score_on.png) !important;
					background-size: 100% !important;
				}
			}
		}
	}
</style>